<template>
  <div class="push-mode">
    <TitleBar title="推送方式设置管理" refresh />
    <div class="data-lie">
      <h1>数据列表</h1>
      <!--      <div-->
      <!--        class="add-push"-->
      <!--        @click="dialogFormVisible = true"-->
      <!--      >添加推送方式</div>-->
      <div
        class="edge"
        style="margin-bottom: 20px;margin-top: 20px"
      />
      <template>
        <el-table
          ref="multipleTable"
          class="table-class"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
          />
          <el-table-column
            align="center"
            label="名称"
            prop="publishName"
          >
            <!-- <template slot-scope="scope">{{ scope.row.tagName }}</template> -->
          </el-table-column>
          <el-table-column
            align="center"
            label="默认推送方式"
          />
          <el-table-column
            align="center"
            label="关联用户标签类型"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-checkbox
                :checked="scope.row.tagVo[0].isHave === '1'?true:false"
                disabled
              >{{ scope.row.tagVo[0].tagName }}</el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="关联用户标签类型"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-checkbox
                :checked="scope.row.tagVo[1].isHave === '1'?true:false"
                disabled
              >{{ scope.row.tagVo[1].tagName }}</el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="关联用户标签类型"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-checkbox
                :checked="scope.row.tagVo[2].isHave === '1'?true:false"
                disabled
              >{{ scope.row.tagVo[2].tagName }}</el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="dialogFormVisible = true,getLabel(scope.row.publishCode)"
              >编辑</el-button>
              <el-button
                type="text"
                style="color: rgba(245,108,108,1);"
                @click="delForm(scope.row.publishCode)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--      分页内容-->
      <div class="pagination-block">
        <!--        <div class="del-button" @click="delAll(multipleSelection)">批量删除</div>-->
        <el-pagination
          class="showpag"
          prev-text="上一页"
          next-text="下一页"
          :background="true"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next,total,slot, jumper"
          :total="totalNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <div
            class="page-number"
            layout="slot"
          >
            <div class="jump-button">跳至</div>
          </div>
        </el-pagination>
      </div>
    </div>
    <!--    弹出窗-->
    <!--    弹出窗-->
    <div class="messageBox">
      <!--      <el-dialog-->
      <!--        center-->
      <!--        :visible.sync="dialogFormVisible"-->
      <!--      >-->
      <!--        <div slot="title">-->
      <!--          <div class="left-icon" />-->
      <!--          <p class="title-name">添加推送方式设置</p>-->
      <!--        </div>-->
      <!--        <el-form-->
      <!--          :model="formA"-->
      <!--          :rules="fromRules"-->
      <!--        >-->
      <!--          <el-form-item-->
      <!--            prop="name"-->
      <!--            label="推送方式名称："-->
      <!--            :label-width="formLabelWidth"-->
      <!--          >-->
      <!--            <el-input-->
      <!--              v-model="formA.name"-->
      <!--              auto-complete="off"-->
      <!--              placeholder="优先推送"-->
      <!--            />-->
      <!--          </el-form-item>-->
      <!--          <el-form-item-->
      <!--            label="关联用户标签："-->
      <!--            :label-width="formLabelWidth"-->
      <!--            class="user-label"-->
      <!--          >-->
      <!--            <el-checkbox-group v-model="formA.resource" @change="changeFrom">-->
      <!--              <el-checkbox v-for="item in formA.tag" :key="item.tagCode" :label="item.tagCode">{{ item.tagName }}</el-checkbox>-->
      <!--            </el-checkbox-group>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--        <div-->
      <!--          slot="footer"-->
      <!--          class="dialog-footer"-->
      <!--        >-->
      <!--          <el-button @click="dialogFormVisible = false">取 消</el-button>-->
      <!--          <el-button-->
      <!--            type="primary"-->
      <!--            @click="dialogFormVisible = false,setPush()"-->
      <!--          >确 定</el-button>-->
      <!--        </div>-->
      <!--      </el-dialog>-->
      <el-dialog
        center
        :visible.sync="dialogFormVisible"
      >
        <div slot="title">
          <div class="left-icon" />
          <p class="title-name">添加关联用户标签设置</p>
        </div>
        <el-form
          :model="formB"
          :rules="contentRules"
        >
          <!--          <el-form-item-->
          <!--            prop="abstract"-->
          <!--            label="用户标签名称："-->
          <!--            :label-width="formLabelWidth"-->
          <!--          >-->
          <!--            <el-input-->
          <!--              v-model="formB.name"-->
          <!--              auto-complete="off"-->
          <!--              placeholder="用户活跃标签"-->
          <!--            />-->
          <!--          </el-form-item>-->
          <el-form-item
            label="用户标签明细："
            :label-width="formLabelWidth"
            class="user-label"
          >
            <el-checkbox-group
              v-model="formB.resource"
              @change="changeFromB"
            >
              <el-checkbox
                v-for="item in duoXun"
                :key="item.tagCode"
                :label="item.tagCode"
                :checked="item.isHave === '1'?true:false"
              >{{ item.tagName }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogFormVisible = false,getAddRelation()"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getPushMessage,
  addPush,
  deletePush,
  addRelation,
  obtainLabel,
  echoDisplay
} from '@/api/operate.js'
export default {
  inject: ['reload'],
  data() {
    return {
      // 搜索框
      query: '',
      // 输入框
      //   用户账号
      account: '',
      //   信息内容 摘要
      abstract: '',
      // 发布时间
      releaseTime: '',
      // 默认筛选选项
      lately: '不限',
      frequency: '不限',
      money: '不限',
      level: '不限',
      userLabel: '不限',
      value: '',
      // 选择器
      messageSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      mailSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      pushSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      labelSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      exportData: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      showNumber: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      sortSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      // 表格列表
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      totalNum: 0,
      pageSize: 6,
      // 弹出窗口
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 弹出窗口一
      formA: {
        name: '',
        resource: [],
        tag: []
      },
      publishCode: '',
      tagB: {},
      formB: {
        name: '',
        resource: [],
        tag: []
      },
      fromRules: {
        name: [{ required: true, message: '输入内容摘要' }]
      },
      // 表单验证规则
      contentRules: {
        abstract: [{ required: true, message: '输入内容摘要' }]
      },
      formLabelWidth: '200px',
      labelData: [],
      echoDisplayList: [],
      duoXun: []
    }
  },
  created() {
    this.getList(this.currentPage, this.pageSize)
    // this.getElasticFrame()
  },
  methods: {
    // 刷新
    Refresh() {
      this.reload()
    },
    changeFromB(a) {
      this.tagB = a
      console.log(this.tagB)
    },
    // 获取标签
    getLabel(a) {
      console.log(a)
      this.publishCode = a
      obtainLabel().then(res => {
        console.log(res, 222222)
        this.$set(this.formB, 'tag', res.data)
        // this.formB.tag = res.data;
        this.getEchoDisplay(a)
        // this.getList(this.currentPage, this.pageSize);
      })
    },
    // 回显标签事件
    getEchoDisplay(a) {
      echoDisplay({
        publishCode: a
      })
        .then(res => {
          this.echoDisplayList = res.data.tagVo
          for (let i = 0; i < this.echoDisplayList.length; i++) {
            this.formB.tag[i].isHave = this.echoDisplayList[i].isHave
          }
          this.duoXun = this.formB.tag
          console.log(this.duoXun, 1111)
          this.getList(this.currentPage, this.pageSize)
        })
        .catch(this.getList(this.currentPage, this.pageSize))
    },
    // 获取数据
    getList(num, size) {
      getPushMessage({
        pageNum: num,
        pageSize: size
      }).then(res => {
        // console.log(res, 111111111);
        this.tableData = res.data.list
        console.log(this.tableData)
        this.totalNum = res.data.total
      })
    },
    // 获取弹框1数据
    // getElasticFrame() {
    //   getElasticA().then(res => {
    //     this.formA.tag = res.data
    //   })
    // },
    // 添加推送
    setPush() {
      addPush({
        publishName: this.formA.name,
        tag: this.tagA
      }).then(res => {
        console.log(res)
        this.getList()
      })
    },
    // 删除
    delForm(id) {
      this.$confirm('确认删除该数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletePush([id])
          .then(res => {
            console.log(res)
            this.getList(this.currentPage, this.pageSize)
          })
          .catch(res => {})
      })

    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 批量删除
    delAll(val) {
      const delAllList = []
      for (let i = 0; i < val.length; i++) {
        delAllList.push(val[i].id)
      }
      deletePush(delAllList).then(res => {
        this.getList(this.currentPage, this.pageSize)
      })
    },

    // 关联用户
    getAddRelation() {
      console.log(this.tagB)
      addRelation({
        publishCode: this.publishCode,
        tag: this.formB.resource
      }).then(res => {
        console.log(res, 333)
        this.reload()
        // this.getList(this.currentPage, this.pageSize);
      })
    },
    // addUser() {
    //   addRelation({
    //     'publishCode': 'string',
    //     'publishName': 'string',
    //     'publish_way': 'string',
    //     'state': 'string',
    //     'tag': [
    //       'string'
    //     ],
    //     'tagCode': 'string',
    //     'tagName': 'string',
    //     'tagType': 'string',
    //     'tagVo': [
    //       {
    //         'createTime': '2019-08-14T13:04:44.896Z',
    //         'id': 0,
    //         'isHave': 'string',
    //         'state': 'string',
    //         'tagCode': 'string',
    //         'tagName': 'string',
    //         'tagType': 'string',
    //         'updateTime': '2019-08-14T13:04:44.896Z'
    //       }
    //     ]
    //   }).then(res => {
    //     console.log(res)
    //   })
    // },
    handleSizeChange() {},
    handleCurrentChange() {
      console.log(this.currentPage)
      if (this.value || this.value1) {
        this.getSelList(this.currentPage, this.pageSize)
      } else {
        this.getlist(this.currentPage, this.pageSize)
      }
    }
  }
}
</script>
<style scoped lang="scss">
// .showpag {
//   /*display: none!important;*/
// }
.push-mode {
  font-family: PingFang-SC-Bold;
  width: 100%;
  /*height: 100%;*/
  /*overflow: auto;*/
  padding: 0 30px 0 30px;
  margin: 16px 0;
}
.title {
  width: 100%;
  height: 37px;
  display: flex;
  flex-flow: nowrap row;
  margin: 16px 0;
  justify-content: space-between;
}
.title-left {
  height: 37px;
  display: flex;
  align-items: center;
  float: left;
}
.title-left > div {
  width: 11px;
  height: 20px;
  display: inline-block;
  background: rgba(72, 141, 255, 1);
  border-radius: 4px;
}
.title-left > p {
  margin-left: 14px;
}
.data-lie {
  position: relative;
  width: 100%;
  /*height: 913px;*/
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 26px 20px 50px 24px;
  margin-bottom: 120px;
}
.data-lie > h1 {
  font-size: 16px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.add-push {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 254, 254, 1);
  width: 106px;
  height: 40px;
  background: rgba(72, 141, 255, 1);
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  margin: 26px 0;
  cursor: pointer;
}
.edge {
  margin-bottom: 20px;
  width: 100%;
  height: 1px;
  background: rgba(241, 241, 241, 1);
}
</style>

